import { Component, OnInit, Injector, Input, EventEmitter, Output } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import * as moment from 'moment';

@Component({
    selector: 'date-month',
    template: `
        <div class="date-month-range" style="display: inline-block;">
            <p-calendar
                [ngModel]="date"
                (onSelect)="onMonthChange($event)"
                [inputStyle]="{ width: '90px', border: 'none', 'margin-left': '10px' }"
                inputStyleClass="form-control"
                view="month"
                [locale]="calendarHelper.cn1"
                dateFormat="yy-mm"
            ></p-calendar>
        </div>
    `
})
export class DateMonthComponent extends AppComponentBase {
    constructor(injector: Injector) {
        super(injector);
    }

    @Input() date = moment()
        .startOf('month')
        .add('month', -1)
        .toDate();

    @Output() dateChange: EventEmitter<Date> = new EventEmitter();

    onMonthChange(event: Date) {
        this.dateChange.emit(event);
    }
}
